<template>
	<view @tap.stop="getRounded" class="dice" :class="[diceRounding ? 'dice-rounding' : '', 'dice-' + num]">
		<view class="dice-dot dice-dot-1">
			<text class="dice-dot-item" />
		</view>
		<view class="dice-dot dice-dot-6">
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
		</view>
		<view class="dice-dot dice-dot-3">
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
		</view>
		<view class="dice-dot dice-dot-4">
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
		</view>
		<view class="dice-dot dice-dot-5">
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
		</view>
		<view class="dice-dot dice-dot-2">
			<text class="dice-dot-item" />
			<text class="dice-dot-item" />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref,defineProps,onUnmounted } from 'vue';
import { $http,createAudio } from '@/utils';
const props = withDefaults(defineProps<{
	skipAnimation? : boolean
}>(), {
});
const emits = defineEmits(['finish']);
const num = ref<number>(0);
const diceRounding = ref<boolean>(false);
const diceAudioContext = createAudio('dice');
onUnmounted(() => {
	diceAudioContext.destroy();
})
const getRounded = () => {
	if (diceRounding.value) {
		return;
	}
	diceAudioContext.restPlay();
	if(props.skipAnimation){
		num.value = Math.floor(Math.random() * 6 + 1);
		emits('finish',num.value);
	}else{
		diceRounding.value = true;
		setTimeout(() => {
			num.value = Math.floor(Math.random() * 6 + 1);
			diceRounding.value = false;
			emits('finish',num.value);
		}, 1000)
	}
}
</script>

<style lang="scss" scoped>
.dice {
	--dice-size: 70px;
	width: var(--dice-size);
	height: var(--dice-size);
	position: relative;
	transform-style: preserve-3d;
	background-color: #fff;
	border-radius: 30px;
}
.dice-rounding {
	animation: rotateDice 0.5s infinite ease-in-out;
}

.dice .dice-dot {
	position: absolute;
	width: var(--dice-size);
	height: var(--dice-size);
	background: #fff;
	border-radius: 30px;
	display: flex;
	box-sizing: border-box;
	backface-visibility: hidden;
	// padding: 10px;
	// border: 1px solid #DADADA;
	// box-shadow: 0 0 10px #DADADA,inset 0 0 10px #DADADA;
}
.dice .dice-dot .dice-dot-item{
	display: flex;
	align-items: center;
	justify-content: center;
}
.dice .dice-dot .dice-dot-item::after {
	content: '';
	display: block;
	width: calc(var(--dice-size) / 3.5);
	height: calc(var(--dice-size) / 3.5);
	background: #000;
	border-radius: 50%;
}
.dice .dice-dot-6 .dice-dot-item{
	width: 50%;
}
.dice .dice-dot-3 .dice-dot-item{
	width: 100%;
	&:nth-child(1){
		align-items: flex-start;
	}
	&:nth-child(3){
		align-items: flex-end;
	}
}
.dice .dice-dot-2 .dice-dot-item{
	width: 100%;
	height: 100%;
}
.dice .dice-dot-5 .dice-dot-item{
	width: 100%;
	&:nth-child(1),&:nth-child(2),&:nth-child(4),&:nth-child(5){
	width: 50%;
	}
}
.dice .dice-dot-4 .dice-dot-item{
	width: 50%;
}
.dice .dice-dot-1 .dice-dot-item::after{
	width: calc(var(--dice-size) / 2);
	height: calc(var(--dice-size) / 2);
	background: red;
}
.dice .dice-dot-4 .dice-dot-item::after{
	background: red;
}
.dice.dice-1{
	transform: rotateX(0deg) rotateY(0deg);
}
.dice.dice-2{
	transform: rotateX(90deg) rotateY(90deg);
}
.dice.dice-3{
	transform: rotateX(180deg) rotateY(270deg);
}
.dice.dice-4{
	transform: rotateX(0deg) rotateY(270deg);
}
.dice.dice-5{
	transform: rotateX(270deg) rotateY(90deg);
}
.dice.dice-6{
	transform: rotateX(180deg) rotateY(0deg);
}

.dice .dice-dot-1 {
	align-items: center;
	justify-content: center;
	transform: translateZ(calc(var(--dice-size) / 2));
}

.dice .dice-dot-6 {
	flex-wrap: wrap;
	transform: rotateX(-180deg) translateZ(calc(var(--dice-size) / 2));
}

.dice .dice-dot-3{
	transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2));
}

.dice .dice-dot-4 {
	flex-wrap: wrap;
	transform: rotateY(90deg) translateZ(calc(var(--dice-size) / 2));
}

.dice .dice-dot-5 {
	flex-wrap: wrap;
	transform: rotateX(90deg) translateZ(calc(var(--dice-size) / 2));
}

.dice .dice-dot-2 {
	transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2));
}

@keyframes rotateDice {
	from {
		transform: rotateX(0) rotateY(0);
	}

	to {
		transform: rotateX(6turn) rotate(3turn) rotateY(1turn)
	}
}
</style>